<script setup lang="ts">
import { ref } from 'vue'
const flag = ref(false)
</script>
<template>
  <button @click="flag = !flag">切换</button>
  <transition name="my">
    <div class="box" v-if="flag"></div>
  </transition>
</template>

<style scoped>
/* transition: all 3s; 要求过是一个精确的值到另一个精确的值, 过渡不了元素的显示与隐藏 */
/* vue提供 Transition组件, 帮助实现动画, 使用transition组件 组件一定是显示与隐藏 
  使用
  1. 使用Transition标签包裹做过渡的元素(Transition组件包裹的只能有且只有一个根元素)
  2. 只有使用的Transition组件包裹的容器, 默认会得到六个类名
  进入阶段
    v-enter-from 进入前
    v-enter-active 进入期间
    v-enter-to  进入后
  离开阶段
    v-leave-from 离开前
    v-leave-active 离开期间
    v-leave-to 离开后
  3. 如果涉及到多个元素 做不同的动画, 可以为Transition标签添加 name属性, 定义的类名 需要定xx-enter-ative  
*/
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}
.my-enter-from {
  width: 0px;
  height: 0px;
  background-color: red;
}
.my-enter-active {
  transition: all 2s;
}
.my-enter-to {
  width: 300px;
  height: 300px;
}
.my-leave-from {
  width: 300px;
  height: 300px;
}
.my-leave-active {
  transition: all 1s;
}
.my-leave-to {
  width: 0px;
  height: 0px;
}
</style>
